<!--  -->
<template>
  <div class="concern">
    <div class="back">
      <span @click="back">返回上一页</span>
    </div>
    <div class="wrap flex grow">
      <div class="flex grow column dynamic">
        <div class="title">
          动态
          <span class="wx" @click="wxQr">微信提醒</span>
        </div>
        <div class="noMore flex grow column" v-if="dynamicList.length == 0">
          <img :src="PIC_URL + '/tlbypcWeb/monitor/wushuju.png'" alt="" />
        </div>
        <div class="list" v-if="dynamicList.length > 0">
          <div class="item" v-for="item in dynamicList" :key="item.id">
            <p>
              <span class="name">{{ item.holderName }}</span>
              <span
                class="type"
                :class="{
                  orange: item.moduleId == 1,
                  blue: item.moduleId == 2,
                }"
                >{{ item.type }}</span
              >
              <span class="time">{{ item.dynamicMaxDate }}</span>
            </p>
            <p class="look" @click="toDetail(item)">
              您关注的{{ item.type }}有新的动态，请立即查看>>
            </p>
          </div>
        </div>
        <mPage
          :pageSize="params.pageSize"
          :currentPage="params.pageNum"
          :total="total"
          :onPage="onPage"
        ></mPage>
      </div>
      <div class="flex grow column myConcern">
        <div class="title">我的关注</div>
        <div class="box">
          <div class="list">
            <div class="sub_title">股东或牛散</div>
            <div class="item flex" v-for="item in nszcList" :key="item.id">
              <span class="txt">{{ item.holderName }}</span>
              <span class="btn flex shrink" @click="changeFlow(item)">{{
                item.followStatus ? "取消关注" : "+关注"
              }}</span>
            </div>
          </div>
          <div class="list">
            <div class="sub_title">机构</div>
            <div class="item flex" v-for="item in jgzcList" :key="item.id">
              <span class="txt">{{ item.holderName }}</span>
              <span class="btn flex shrink" @click="changeFlow(item)">{{
                item.followStatus ? "取消关注" : "+关注"
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFollowList, getDynamic, follow, unfollow } from "../api/index";
import mPage from "../components/mPage";
import { CLIENT } from "@/common/const";

export default {
  data() {
    return {
      nszcList: [],
      jgzcList: [],
      dynamicList: [],
      noMore: "",
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 20,
      },
      path:CLIENT,
    };
  },

  components: { mPage },

  computed: {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //   vm.followList = initialize();
      vm.getFollowList();
      vm.getDynamic();
    });
  },
  mounted() {},

  methods: {
    //我的关注
    async getFollowList() {
      const { userId } = this.$route.params;
      await getFollowList({ userId }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          data = data.map((item) => {
            item.followStatus = 1;
            return item;
          });
          this.nszcList = data.filter((item) => item.moduleId == 1);
          this.jgzcList = data.filter((item) => item.moduleId == 2);
        }
      });
    },
    async getDynamic() {
      const { userId } = this.$route.params;
      const send = {
        userId,
        ...this.params,
      };
      await getDynamic(send).then((back) => {
        if (back.status == 1) {
          let list = back.data.list;
          this.total = back.data.total;
          this.dynamicList = list.map((item) => {
            if (item.moduleId == 1) {
              item.type = "股东牛散";
            }
            if (item.moduleId == 2) {
              item.type = "机构";
            }
            return item;
          });
        }
      });
    },
    toDetail(row) {
      this.$store.commit("set", {
        key: "holder",
        value: {
          holderName: row.holderName,
          orgCode: row.orgCode,
        },
      });
      this.$router.push({ name: ["nszc", "jgzc"][row.moduleId - 1] });
    },
    onPage(page) {
      this.params.pageNum = page;
      this.getDynamic();
    },
    wxQr() {
    //   window.prompt(
    //     "",
    //     `up://["open.web",${Date.now()},{"url":"${CLIENT}/client/optional/qr.html?${Date.now()}","title":"微信提醒","popuptype":1}]`
    //   );
       window.prompt(
        "",
        `up://["open.web",${Date.now()},{"url":"${this.path}/webclient/weChatRemind/index.html#/qr?${Date.now()}","title":"微信提醒","popuptype":1}]`
      );
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    changeFlow(row) {
      console.log(row);
      row.followStatus ? this.unfollow(row) : this.follow(row);
    },
    async follow(row) {
      const { userId } = this.$route.params;
      await follow({
        moduleId: row.moduleId,
        orgCode: row?.orgCode,
        userId,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          row.followStatus = true;
        }
      });
    },
    async unfollow(row) {
      const { userId } = this.$route.params;
      await unfollow({
        moduleId: row.moduleId,
        orgCode: row?.orgCode,
        userId,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          row.followStatus = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.concern {
  padding: 18px 0 30px;
  width: 1200px;
  margin: 0 auto;
  .back {
    text-align: right;
    padding-bottom: 19px;
    span {
      display: inline-block;
      width: 108px;
      height: 30px;
      background: linear-gradient(0deg, #343845, #4e596d);
      border: 1px solid #3d3d4b;
      border-radius: 2px;
      cursor: pointer;
      color: #fff;
      font-size: 15px;
      text-align: center;
      line-height: 30px;
      &:hover {
        background: linear-gradient(180deg, #b93636, #6a0101);
        border: 1px solid #b83636;
      }
    }
  }
  .wrap {
    border: 2px solid #27282e;
    border-radius: 6px;
    height: 846px;
    .title {
      line-height: 57px;
      background: #15161c;
      text-align: center;
      color: #ff8a00;
      font-size: 26px;
      position: relative;
      border-radius: 4px 0px 0px 0px;
      .wx {
        font-size: 16px;
        color: #36bd53;
        position: absolute;
        cursor: pointer;
        right: 20px;
        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 22px;
          height: 17px;
          background: url($PIC_URL + "/tlbypcWeb/monitor/weixin.png") no-repeat
            center;
          left: -28px;
          top: 20px;
        }
      }
    }
    .dynamic {
      width: 65%;
      border-right: 1px solid #27282e;
      .noMore {
        justify-content: center;
        align-items: center;
      }
      .list {
        overflow-y: auto;
        .item {
          padding: 20px;
          border-bottom: 1px solid #27282e;
          .name {
            font-size: 18px;
            color: #ff8a00;
            margin-right: 10px;
          }
          .type {
            display: inline-block;
            width: 74px;
            text-align: center;
            line-height: 22px;
            border-radius: 2px;
            font-size: 15px;
            color: #ffffff;
            &.orange {
              background: linear-gradient(90deg, #d2080b, #ff8c10);
            }
            &.blue {
              background: linear-gradient(90deg, #5429e8, #0878f5);
            }
          }
          .time {
            font-size: 16px;
            color: #999999;
            padding-left: 10px;
          }
          .look {
            font-size: 16px;
            color: #bcbfc4;
            padding-top: 14px;
            cursor: pointer;
            &:hover {
              color: #2c7eff;
              text-decoration: underline;
            }
          }
        }
      }
    }
    .myConcern {
      width: 35%;
      .box {
        overflow-y: auto;
        .list {
          border-bottom: 1px solid #27282e;
          padding: 20px;
          &:last-child {
            border-bottom: none;
          }
          .sub_title {
            font-size: 18px;
            color: #e5e5e5;
            padding-bottom: 14px;
          }
          .item {
            justify-content: space-between;
            align-items: center;
            line-height: 22px;
            margin-bottom: 10px;
            &:last-child {
              margin-bottom: 0;
            }
            .txt {
              color: #ff8a00;
              font-size: 18px;
              margin-right: 42px;
            }
            .btn {
              display: inline-block;
              width: 88px;
              height: 25px;
              background: #25262a;
              line-height: 25px;
              text-align: center;
              border: 1px solid #434448;
              font-size: 15px;
              color: #2c7eff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
